<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <button @click="fn">change</button>
    <h2>全名是{{fullName}}</h2>
  </div>
  <script>
    Vue.config.productionTip = false;
    /* 
    计算属性computed完整写法
  
    */
    const vm = new Vue({
      el: "#app",
      data () {
        return {
          firstName: "Wang",
          lastName: "Whongwang",
        };
      },
      methods: {
        fn(){
          this.fullName='li xiaoxiao'
        }
      },
      computed: {
        // 这个书写方式就是代表当前计算属性是只读的 默认是getter函数
        // fullName() {},

        //计算属性可读可写(当获取fullName的值的时候就调用getter函数,当对fullName进行设置的时候,会调用setter函数)
        fullName: {
          get () {
            // 进入程序 就会自动执行一次
            console.log("getter");
            return (
              this.firstName.toLowerCase() + " " + this.lastName.toLowerCase()
            );
          },
          set (val) {
            /* set函数中的参数就是计算属性被设置的值 */
            console.log("setter", val);
            //setter中的逻辑我们可以自由发挥
            this.firstName = val.split(" ")[0];
            this.lastName = val.split(" ")[1];
          },
        },
      },

    });
  </script>
</body>

</html>